<template>
  <body>
    <header class="in-banner bg-orange">
      <div class="bg-333 hei40">
        <div class="container">
          <div class="pull-left mar-t8"><span class="ft-ochre"><a href="#">数字后勤服务大厅</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="ft-grey8"><a href="#">运驾中心</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#">服务监督</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#">网络报修</a></span></div>
          <!--user login-->
          <div class="user-box user-txt pull-right mar-t8">
            <div class="b-login hidden"><!--未登录-->
              <i></i>
              <a href="#//userLogin">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#/userRegister">注册</a>
            </div>
            <div class="a-login"><!--已登录-->
              <i class="on"><img src="../../static/img/temp03.jpg" width="24" height="24" class="img-circle"></i>
              <a href="#">Chenshangcai</a>
            </div>
          </div>
          <!--/user-->
        </div>
      </div>
      <div class="container hei90">
        <!--logo-->
        <div class="logo pull-left mar-t15"></div>
        <!--search-->
        <div class="search pull-right mar-t30 mar-l20">
          <div class="input-group">
            <input type="text" class="form-control" value="搜索商家/美食">
            <span class="input-group-btn">
              <button class="btn" type="button"><img src="../../static/img/search.png" width="18" height="18" alt=""/></button>
            </span>
          </div>
        </div>
        <!--/search-->
        <!--.menu-->
        <div class="pull-right">
          <nav class="pull-left mar-t30" role="navigation">
            <ul class="nav-menu nav-menu-tabs">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">餐厅介绍</a>
                <ul class="dropdown-menu">
                  <li><a href="#">桃园食堂</a></li>
                  <li><a href="#">橘园食堂</a></li>
                  <li><a href="#">梅园食堂</a></li>
                  <li><a href="#">杏园食堂</a></li>
                  <li><a href="#">李园食堂</a></li>
                  <li><a href="#">禾丰楼餐厅</a></li>
                  <li><a href="#">楠园一食堂</a></li>
                  <li><a href="#">楠园二食堂</a></li>
                  <li><a href="#">竹园食堂</a></li>
                </ul>
              </li>
              <li><a href="#">推荐菜品</a></li>
              <li><a href="#/orderRecord">我的订单</a></li>
            </ul>
          </nav>
          <div class="pull-left s-cart mar-t30"><i></i><span class="pull-left" @click="isNoLogin">购物车</span> <em>12</em></div>
        </div>
        <!--/menu-->
      </div>
    </header>
    <div class="container mar-t30" >
      <div class="row">
        <div class="col-md-12">
          <div class="list-ti-box pad20">
            <div class="list-ti ft-ochre ft18 pull-left"><i></i>&nbsp;&nbsp;菜单类别</div>
<!--            <div class="tag ft16 pull-right mar-l3" >-->
<!--              <a href="#" class="on" >全部</a>-->
              <div class="tag ft16 pull-right mar-l3" v-for="all in allProductsItems">
                <a href="#" class="on" @click="getAllStoreByProductsId(all.id)">{{all.productsname}}</a>
<!--              <a href="#">套餐</a>-->
<!--              <a href="#">荤菜</a>-->
<!--              <a href="#">素菜</a>-->
<!--              <a href="#">主食</a>-->
<!--              <a href="#">小吃</a>-->
            </div>
            <p class="clearfix"></p>
          </div>
        </div>
      </div>


      <div class="row mar-t20" >
        <div class="col-md-4" v-for="item in allStoreItems">
          <router-link :to="{
            path:'/carte',
            query:{
              storeId:item.storeId
            }
          }"><!--商家详情-->
          <div class="list-box">
            <div class="pull-left"><img src="../../static/img/img01.png" width="140" height="140" alt=""/></div>
            <div class="pull-left mar-l20">
              <p class="ft18 mar-t10"><!--商家名称--> {{item.storeName}} <span class="ft14 ft-grey8">(北区)</span></p>
              <div class="icon-stars mar-t10">
                <div>
                  <!--<p><a></a><a></a><a></a><a></a><a></a></p>-->
                  <i style="width:72px;"></i>
                </div>
                <span class="txt"> <!--商家评分-->{{item.storeScore}}星</span>
              </div>
              <p class="clearfix"></p>
              <p class="ft-grey6">月售{{item.count}}单</p>
              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥{{item.initiatePrice}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>
            </div>
            <p class="clearfix"></p>
          </div>
          </router-link>
        </div>

<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img02.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img03.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img04.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img05.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img06.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img01.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img02.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <div class="list-box">-->
<!--            <div class="pull-left"><img src="../../static/img/img03.png" width="140" height="140" alt=""/></div>-->
<!--            <div class="pull-left mar-l20">-->
<!--              <p class="ft18 mar-t10">桃园食堂 <span class="ft14 ft-grey8">(北区)</span></p>-->
<!--              <div class="icon-stars mar-t10">-->
<!--                <div>-->
<!--                  &lt;!&ndash;<p><a></a><a></a><a></a><a></a><a></a></p>&ndash;&gt;-->
<!--                  <i style="width:72px;"></i>-->
<!--                </div>-->
<!--                <span class="txt"> 4.0星</span>-->
<!--              </div>-->
<!--              <p class="clearfix"></p>-->
<!--              <p class="ft-grey6">月售280单</p>-->
<!--              <p class="ft-grey9 ft12 mar-t20"><span>起送:￥10</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>免配送费</span></p>-->
<!--            </div>-->
<!--            <p class="clearfix"></p>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <p class="hei50">&nbsp;</p>
      <!--footer-->
      <footer class="line text-center ft-grey6 ft12">
        <p class="mar-t10 mar-b20">版权所有：西南大学资产经营公司 (渝ICP 06005063号)    重庆市北碚区天生路2号    邮编：400715 </p>
      </footer>
    </div>
  </body>
</template>

<script>
    export default {
      name: "list",
      data(){
        return{
          // 所有商家
          allStoreItems:[],
          //所有餐品
          allProductsItems:[],
          //餐品分页参数
          storeInfoPage:{
            currentPage:"",
            pageSize:""
          }
        }
      },
      methods:{
        //查询所有餐品
        UserSelect(){
          this.$http.get("/productsInfo/UserSelect",this.storeInfoPage).then(resp=>{
            // alert(1);
            // console.log(resp)
            if (resp.data.code==200){
            this.allProductsItems=resp.data.data;
            }
          })
        },
        //判断是否登陆
        isNoLogin(){
          this.$http.get("").then(resp=>{
            if (resp.data.code==200){
              //购物车页面
              location.href=""
            } else {
              //登陆页面
              location.href="/userLogin"
            }
          })
        },
        //查询所有商家
        getAllStore(){
          this.$http.get("/storeInfo/getAllStore").then(resp=>{
            // alert();
            // console.log(resp);
            if (resp.data.code==200) {
              this.allStoreItems=resp.data.data;
            }
          })
        },
        getAllStoreByProductsId(productsId){
          alert(productsId)
          this.$http.get("/storeInfo/getAllStoreByProductsId",{
            params:{
              id:productsId
            }
          }).then(resp=>{
            // alert();
            // console.log(resp);
            if (resp.data.code==200) {
              this.allStoreItems=resp.data.data
            }
          })
        }
      },
      //预加载
      created() {
        this.UserSelect();
        this.getAllStore();

      }

    }
</script>

<style scoped>

</style>
